import { Component, OnInit, Input, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
import { SongSheet } from 'src/app/routes/entity';

@Component({
  selector: 'app-single-sheet',
  templateUrl: './single-sheet.component.html',
  styleUrls: ['./single-sheet.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SingleSheetComponent implements OnInit {

  @Input()
  sheet: SongSheet;

  @Output()
  onPlaySheet: EventEmitter<number> = new EventEmitter<number>();

  constructor() { }

  ngOnInit(): void {
  }

  playSheet(event: MouseEvent, id: number): void {
    event.stopPropagation();
    this.onPlaySheet.emit(id);
  }

  get coverImage(): string {
    return this.sheet?.picUrl || this.sheet?.coverImgUrl;
  }

}
